<template>
	<gui-page ref="guipage" :refresh="true" @reload="reload" :loadmore="true" @loadmorefun="loadData"
		:apiLoadingStatus="apiLoadingStatus">
		<template v-slot:gBody>
			<gui-a-header title="职位详情"></gui-a-header>
			<view class="list">
				<view class="post-list bgfff boxShadow">
					<view class="item">
						<view class="flex-ac-jb">
							<text class="title">{{postData.postName}}</text>
							<text class="pay f24 colorRed">{{postData.postMoney}}</text>
						</view>
						<view class="info flex-ac f22">
							<text>{{postData.workArea}} {{postData.work}} {{postData.education}}
								招{{postData.recruitNum}}人</text>
						</view>
						<view class="flex-ac-row f18" v-if="postData.comUsertConpanyInfo.welfareTreatment">
							<view class="post-label c999"
								v-for="(wItem,wIndex) in postData.comUsertConpanyInfo.welfareTreatment.split(',')"
								:key="wIndex">{{wItem}}</view>
						</view>
						<view class="company flex-ac-jb">
							<view class="left flex-ac flex1">
								<image class="qiye-icon" :src="postData.comUsertConpanyInfo.logo" mode="aspectFill">
								</image>
								<view class="info flex-dc">
									<text class="c333 f24">{{postData.comUsertConpanyInfo.companyName}}</text>
									<text class="c666 f20">
										{{(postData.comUsertConpanyInfo.industry ? postData.comUsertConpanyInfo.industry + '/' : '')}}
										{{(postData.comUsertConpanyInfo.financing ? postData.comUsertConpanyInfo.financing + '/' : '')}}
										{{postData.comUsertConpanyInfo.personnel}}
									</text>
								</view>
							</view>
							<view class="saveBtn f20 no-collect">
								<text class="f16">已投递：{{postData.ytdNum}}人</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info-con bgfff post-main">
				<view class="title-img flex-ac">
					<image src="../../static/mine/zhiweijiashao.png" mode="widthFix" style="height: auto;"></image>
					<text class="f26 gui-bold">投递情况</text>
				</view>
				<view class="deliver-list bgfff nopd">
					<gui-empty v-if="noData">
						<template v-slot:img>
							<view class="gui-flex gui-rows gui-justify-content-center">
								<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png"
									mode="widthFix">
								</image>
							</view>
						</template>
						<template v-slot:text>
							<text
								class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
						</template>
					</gui-empty>
					<view class="deliver-item line" v-for="(item,index) in dataList" :key="item.id">
						<view class="top gui-flex gui-align-items-start">
							<view class="photo">
								<gui-image :src="item.userImg" :width="115" :height="115" borderRadius="60rpx"
									mode="aspectFill"></gui-image>
								<image class="sex_img" src="../../static/image/man.png" mode="widthFix"></image>
							</view>
							<view class="info">
								<view class="f26 c333">
									{{item.userName}}
								</view>
								<view class="f22 c666 mt10">
									投递时间：{{item.createTime}}
								</view>
								<view class="sgin gui-flex">
									<view class="sgin-item">
										{{item.userAge}}岁
									</view>
									<view class="sgin-item">
										{{item.workTime}}
									</view>
									<view class="sgin-item" v-if="item.education">
										{{item.education}}
									</view>
									<view class="sgin-item stress-warp" v-if="item.workStatus">
										{{item.workStatus}}
									</view>
								</view>
							</view>
						</view>
						<view class="hang gui-flex gui-justify-content-end mt20">
							<view class="btn refuse f16" v-if="item.notRefuse == 2" @click="refuseFun(item)">
								拒绝<text class="bai-icons ml8 c666">&#xe620;</text>
							</view>
							<view class="btn refused f16" v-if="item.notRefuse == 1">
								已拒绝<text class="bai-icons ml8 cfff">&#xe620;</text>
							</view>
							<view class="btn f16" :class="{'check': item.shFollow == 1}" @click="followFun(item)">
								{{(item.shFollow == 0) ? '人才关注' : '已关注'}}
								<text class="gui-icons ml8 cfff">&#xe6ad;</text>
							</view>
							<view class="btn f16" @click="callPhone(item)">
								一键拨号<text class="bai-icons ml8 cfff">&#xe625;</text>
							</view>
							<view class="btn f16">
								查看详情<text class="gui-icons ml8 cfff">&#xe609;</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from '@/stores/user.js'
	import {
		selectPostByCompanyInfo,
		selectUserPostInfoList,
		getUserFollowUp,
		butUserPostFou
	} from '@/api/company.js';
	const store = useUserStore()
	const {
		isLogin
	} = storeToRefs(store)

	import {
		useGetterMap
	} from '@/utils/useGetters.js';
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	const $u = reactive(inject('$u'))
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const deliverFun = () => {
		console.log(isLogin.value);
		if (!isLogin.value) {
			$u.to('/pages/login/login');
		}
	}
	const guipage = ref(null);
	const apiLoadingStatus = ref(false)
	const query = ref({
		pageNum: 1,
		pageSize: 10,
		refPostId: ''
	})
	const postId = ref('');
	const postData = ref({
		comUsertConpanyInfo: {
			logo: ''
		}
	})
	const dataList = ref([])
	const noData = ref(false);
	onLoad((option) => {
		if (option.postId) {
			postId.value = option.postId;
			query.value.refPostId = option.postId;
			loadPost();
			loadData();
		}
	})

	// 查询职位信息
	const loadPost = () => {
		selectPostByCompanyInfo({
			id: postId.value
		}).then(res => {
			if (res.code == 200) {
				postData.value = res.data;
			}
		})
	}

	const reload = (isRelod = true) => {
		query.value.pageNum = 1;
		loadData(isRelod);
	}

	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		selectUserPostInfoList(queryParam).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				}
				else {
					dataList.value = [];
					dataList.value = resultArr;
					// 刷新
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				query.value.pageNum++;
			}
		})
	}

	const followFun = (item) => {
		getUserFollowUp({
			refCustomId: item.refUserId
		}).then(res => {
			if (res.code == 200) {
				if (item.shFollow == 1) {
					item.shFollow = 0;
					$u.msg('已取消关注')
				} else {
					item.shFollow = 1;
					$u.msg('已关注')
				}
			}
		})
	}
	const refuseFun = (item) => {
		butUserPostFou({
			id: item.refUserPostInfoId
		}).then(res => {
			if (res.code == 200) {
				$u.msg("已拒绝")
				if (item.notRefuse == 2) {
					item.notRefuse = 1;
				}
			}
		})
	}
	
	const callPhone = (item) => {
		if(item.userPhone) {
			$u.makePhone(item.userPhone.toString());
		}
	}
	
</script>

<style lang="scss">
	.list {
		padding: 17rpx 38rpx;

		.post-list {
			padding: 25rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;

			.item {
				padding-bottom: 0;
			}

			.company {
				.qiye-icon {
					width: 60rpx;
					height: 60rpx;
					border-radius: 14rpx;
				}

				.saveBtn {
					width: 130rpx;
					height: 43rpx;
					border-radius: 14rpx;
					margin-left: 20rpx;

					.icon {
						width: 20rpx;
						margin-left: 10rpx;
					}
				}

				.no-collect {
					background: rgba(64, 114, 254, .5);
					color: #4072FE;
				}
			}
		}
	}

	.info-con {
		padding: 40rpx 38rpx;

		.desc-con {
			line-height: 40rpx;
			margin-top: 26rpx;
			margin-bottom: 54rpx;
		}

		.secure-tip {
			position: relative;
			background: #F2F2F2;
			padding: 37rpx 48rpx 37rpx 39rpx;
			line-height: 40rpx;

			.icon {
				position: absolute;
				right: 26rpx;
				top: 28rpx;
				width: 70rpx;
				opacity: .5;
			}
		}

		.company-info {
			padding-left: 38rpx;
			margin-top: 30rpx;
			margin-bottom: 46rpx;

			.logo-info {
				line-height: 36rpx;
			}

			.comLogo {
				width: 82rpx;
				height: 82rpx;
				margin-right: 16rpx;
			}

			.company-text {
				line-height: 40rpx;
				margin-top: 20rpx;

				image {
					width: 20rpx;
					margin-left: 15rpx;
				}
			}
		}

		.address {
			.address-name {
				padding-left: 38rpx;
				margin: 20rpx 0 25rpx 0;
			}
		}

		.map {
			width: 674rpx;
			height: 362rpx;
			padding-bottom: 100rpx;
		}
	}

	.btnFixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 90rpx;
		border-radius: 0;
		z-index: 9;
	}
</style>